<html>
<head>
    <style type="text/css">
        @import "/js/dojo/dojo/resources/dojo.css"
    </style>
    <?=$this->headTitle() ?>
    <?=$this->headLink() ?>
    <?=$this->headStyle() ?>

    <style type="text/css">
        @import "/js/dojo/dijit/themes/tundra/tundra.css";
    </style>
    <script type="text/javascript">
    //<!--
        var djConfig = {"parseOnLoad":true};
    //-->
    </script>
    <script type="text/javascript" src="/js/dojo/dojo/dojo.js"></script>

    <script type="text/javascript">
    //<!--
    dojo.require("dijit.layout.ContentPane");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojox.grid.DataGrid");
    //-->
    </script>
    <style type="text/css">
        @import "/js/dojo/dojox/grid/resources/Grid.css";
        @import "/js/dojo/dojox/grid/resources/tundraGrid.css";
        .dojoxGrid table {
            margin:      0;
        }
        body.tundra {
            width:       100%;
            height:      100%;
            margin:      0px;
            padding:     0px;
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
        }
    </style>

    <script type="text/javascript">
    function doSearch() {
        var query     = document.getElementById('search').value;
        var url       = "/dojo/?q=" + query;
        var catalog   = document.getElementById('catalog').value;
        if (catalog && catalog != 'default') {
            url       = url + "&catalog=" + catalog;
        }
        var dataStore = new dojo.data.ItemFileReadStore({'url': url});

        var grid = dijit.byId("grid");
        grid.setStore(dataStore);
    }

    /**
     * Creates a link from a given cell content, if it starts with
     * http:// or https://
     */
    function createLink(value) {
        return value.replace(/(http(s?):\/\/\S*)/g, '<a href="$1" target="_blank">$1</a>');
    }

    function rowClicked(e) {
        //alert("Clicked row: "+e.rowNode.firstChild.innerHTML);
        var data = e.grid.getItem(e.rowIndex);
        window.open(data.uri, 'MarjoryDetails');
        console.log('Row doubleclicked: ' + data.uri);
    }
    </script>
</head>
<body class="tundra">

    <div style="width: 100%; height: 100%" id="masterLayout" design="headline" gutter="false" dojoType="dijit.layout.BorderContainer">
        <div style="height: 75px;" id="menuPane" region="top" dojoType="dijit.layout.ContentPane">
            <img src="/img/MarjoryLogo.png" style="float: right;" />
            <strong>Marjory Administration interface</strong>
        </div>
        <div style="width: 200px;" id="navPane" region="left" splitter="true" dojoType="dijit.layout.ContentPane">
            <form name="searchform" onsubmit="return false;">
                <label for="search">Search for:</label>
                <input type="text" id="search" name="search" value="">
                <?php echo $this->formSelect('catalog', $this->currentCatalog, null, $this->catalogList); ?>
                <button id="btSearch" onclick="doSearch();">Search</button>
            </form>
        </div>
        <div id="mainPane" region="center" splitter="true" dojoType="dijit.layout.ContentPane">
            <table jsid="grid" id="grid" dojoType="dojox.grid.DataGrid" query="{ uri: '*' }"
                   rowSelector="20px" class="tundra" onRowDblClick="rowClicked"
                   width="100%" height="100%">
              <thead>
                <tr>
                    <th field="uri" width="30%" rowspan="2" formatter="createLink">URI</th>
                    <th field="title" width="60%">Title</th>
                    <th field="_score" width="30%">Score</th>
                </tr>
                <tr>
                    <th field="abstract" colspan="2">Abstract</th>
                </tr>
              </thead>
            </table>
        </div>
    </div>
</body>
</html>